<template>
	<view>
		<view class="skip">
			<view @click="skip">
				跳过
			</view>
		</view>
		<swiper class="swiper" :indicator-dots='false' indicator-color="#fff" indicator-active-color='#ccc'
			:circular='true' :autoplay='true' :interval='3000' :duration='1000'>
			<!-- 循环 -->
			<swiper-item style="height: 100vh;">
				<view class="img">
					<image :src="IMGLink + imgUrl" mode="scaleToFill"></image>
				</view>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	import {
		appletAd
	} from "@/api/my.js";
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				imgUrl: '',
				time: null,
				IMGLink: this.IMGLink,
			}
		},
		computed: {
			...mapState(['equipTypeCode'])
		},
		onLoad() {
			this.list();
		},
		methods: {
			list() {
				appletAd(`/enable?equipClassify=${this.equipTypeCode}`, 'post').then(res => {
					if (res.data) {
						this.imgUrl = res.data.url;

						this.time = setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						}, res.data.duration * 1000);
					} else {
						uni.switchTab({
							url: '/pages/home/index'
						})
					}
				}).catch(err => {
					this.$Toast.none(err.message);
				})
			},
			skip() {
				uni.switchTab({
					url: '/pages/home/index'
				})
				clearTimeout(this.time)
			}
		}
	}
</script>

<style lang="less" scoped>
	.skip {
		width: 100%;
		position: absolute;
		text-align: right;
		z-index: 2;
		display: flex;
		justify-content: flex-end;

		view {
			width: 100rpx;
			height: 50rpx;
			border-radius: 25rpx;
			background-color: #000000;
			opacity: 0.5;
			line-height: 50rpx;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			margin: 20rpx;
		}
	}

	.img {
		width: 100%;
		height: 100vh;
	}

	image {
		width: 100%;
		height: 100vh;
	}

	.swiper {
		height: 100vh;
	}
</style>
